<template>
  <div class="total-grad">
    <div class="grad-1">
      <div class="grad-title">新增患者</div>
      <div class="grad-num">{{todayData.todayNewCustomer || 0}}</div>
    </div>
    <div class="grad-1 grad-2">
      <div class="grad-title">新增预约</div>
      <div class="grad-num">{{todayData.todayNewSub || 0}}</div>
    </div>
    <div class="grad-1 grad-3" @click="handleShow">
      <div class="grad-title">实收金额</div>
      <div class="grad-num" v-if="isShow">{{'******'}}</div>
      <div class="grad-num" v-else>{{todayData.todayNewCollection || 0}}</div>
    </div>
    <div class="grad-1 grad-4">
      <div class="grad-title">随访人员</div>
      <div class="grad-num">{{todayData.todayNewAccessLog || 0}}</div>
    </div>
    <div class="grad-1 grad-5">
      <div class="grad-title">今日就诊</div>
      <div class="grad-num">{{todayData.todayNewSickMedicalRecords || 0}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';

type TodayDataType = {
  todayNewCustomer: number,
  todayNewSub: number,
  todayNewCollection: number,
  todayNewAccessLog: number,
  todayNewSickMedicalRecords: number
}
export default defineComponent({
  name:'WorkStatistics',
  props: {
    todayData: {
      type: Object as PropType<TodayDataType>,
      default: {}
    }
  },
  setup() {
    let isShow = ref(true)
    const handleShow = () => {
      isShow.value = !isShow.value
    } 
    return {
      handleShow,
      isShow
    }
  }
})
</script>

<style lang="scss" scoped>

.grad-1 {
  background-image: url('../../assets/image/g-1.png');
}
.grad-2 {
  background-image: url('../../assets/image/g-2.png');
}
.grad-3 {
  background-image: url('../../assets/image/g-3.png');
  cursor: pointer;
  user-select: none;
}
.grad-4 {
  background-image: url('../../assets/image/g-4.png');
}
.grad-5 {
  background-image: url('../../assets/image/g-5.png');
}
</style>